<template>
	<view class="container">
		
		<carHeader style="padding:10rpx;"
		  :title="'维修任务'">
		</carHeader>
		
		<view class="top">
			<!-- <input type="text"  
            placeholder="输入需要搜索的内容"  
			v-model="searchQuery"/> -->
			<image src="/static/车联网服务商家端-03核销记录_slices/搜索.png"></image>
			<view class="one">
				<text>共{{list1.length}}条</text>
			</view>
			<!-- <uni-select v-model="selectedValue" class="one" placeholder="全部">
				<uni-option v-for="{item in status}"></uni-option>
				<uni-option value="option1">已预约</uni-option>
				<uni-option value="option2">进行中</uni-option>
				<uni-option value="option3">已完成</uni-option>
			</uni-select> -->
			<!-- <view>
			    <uni-data-select :show="selectShow" :range="selectOptions" @change="selectChange">
			      <view slot="button" class="select-button">{{selectedValue}}</view>
			    </uni-data-select>
			</view> -->
			<view class="one">
				<text>状态</text>
			</view>
			<view class="one">
				<text>维修方式</text>
			</view>
			<view class="two" style="margin-left: 10px;">
				<uni-calendar ref="calendar" 
				class="uni-calendar--hook" 
				:clear-date="true" 
				:date="info.date" 
				:insert="info.insert" 
				:lunar="info.lunar" 
				:startDate="info.startDate"
				:endDate="info.endDate" 
				:range="info.range" 
				@confirm="confirm" @close="close"/>
				<u-icon name="calendar" color="#ffffff" 
				@click="open"
				></u-icon>
			</view>
			
			<view class="two">
				<text>日期</text>
			</view>
			
			
			<view class="dropdown">
			  <!-- 触发下拉的按钮或视图 -->  
			  <view class="dropdown-trigger" @click="toggleDropdown">  
			    {{ selected || '全部' }}  
			    <view class="arrow" :class="{ 'arrow-up': isDropdownVisible }">
					  <u-icon name="arrow-down" size="20rpx" color="#fff"></u-icon>
				  </view>  
			  </view>  
			
			  <!-- 下拉列表，使用v-show控制显示隐藏 -->  
			  <view class="dropdown-content" v-show="isDropdownVisible">  
			    <scroll-view scroll-y="true" style="height: 200px;">  
			      <view class="dropdown-item" v-for="(item, index) in range"
				   :key="index" @click="selectItem(item)">  
			        {{ item }}  
			      </view>  
			    </scroll-view>  
			  </view>  
			</view>
			
			<view class="dropdown">
			  <!-- 触发下拉的按钮或视图 -->  
			  <view class="dropdown-trigger" @click="toggleDropdown2">  
			    {{ selected2 || '全部' }}  
			    <view class="arrow" :class="{ 'arrow-up': isDropdownVisible2 }">
					  <u-icon name="arrow-down" size="20rpx" color="#fff"></u-icon>
				  </view>  
			  </view>  
			
			  <!-- 下拉列表，使用v-show控制显示隐藏 -->  
			  <view class="dropdown-content" v-show="isDropdownVisible2">  
			    <scroll-view scroll-y="true" style="height: 200px;">  
			      <view class="dropdown-item" v-for="(item, index) in method" 
				  :key="index" @click="selectItem2(item)">  
			        {{ item }}  
			      </view>  
			    </scroll-view>  
			  </view>  
			</view>
			
		</view>
		
		<view class="repair" v-for="item in list1">
			<view class="number">
				<text>维修单号：{{item.repairReservationId}}</text>
				<view>
					<text>{{item.status == 0 ? "已预约" : (item.status == 1 ? "进行中" : "已完成")}}</text>
				</view>
				
			</view>
			<view class="info">维修方式：{{item.repairType}}</view>
			
			<view class="info">预约日期：{{item.reservationTime}}</view>
			<view class="btn" >
				<u-button @click="change(item.repairReservationId)" type="primary" :color="'#0662E6'" shape="circle">查看详情</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	/**
		 * 获取任意时间
		 */
		/* function getDate(date, AddDayCount = 0) {
			if (!date) {
				date = new Date()
			}
			if (typeof date !== 'object') {
				date = date.replace(/-/g, '/')
			}
			const dd = new Date(date)
	
			dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
	
			const y = dd.getFullYear()
			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			return {
				fullDate: y + '-' + m + '-' + d,
				year: y,
				month: m,
				date: d,
				day: dd.getDay()
			}
		} */
	export default {
		data() {
			return {
				/* selectShow: false,
				selectOptions: ['全部', '已预约', '进行中', '已完成'],
				selectedValue: '全部', */
				list1:[],
				searchQuery: '', // 绑定到输入框的数据
				// total:'3',//总条数
				info: {  //日历信息
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				isDropdownVisible: false, // 控制下拉框的显示隐藏
				selected: 0, // 当前选中的项  
				isDropdownVisible2: false, // 控制下拉框的显示隐藏
				selected2: null, // 当前选中的项  
				range: ['全部', '进行中', '已预约','已完成'], // 状态下拉列表的选项  
				method:['全部', '到店维修', '上门取车'] , //维修方式下拉列表的选项  
				/* 
				repairForm:[//维修信息列表
					{
						repairNumber:"3535252",
						repairMethod:"到店维修",
						appointmentTime:"2023-03-18 11:00",
						status:"进行中"
					},
					{
						repairNumber:"3535252",
						repairMethod:"上门取车",
						appointmentTime:"2023-03-18 11:00",
						status:"已完成"
					},
					{
						repairNumber:"3535252",
						repairMethod:"上门取车",
						appointmentTime:"2023-03-18 11:00",
						status:"进行中"
					}
				] */
				
			};
		},
		onLoad() {
			const that=this;
			uni.request({
							url:"http://localhost:8080/carShop/repair/list",
							method:"POST",
							success(res) {
								console.log("成功获取维修任务列表");
								console.log(res);
								that.list1= res.data.data;
								console.log(that.list1);
							},
							fail: (res) => {
								console.log("获取维修任务列表失败");
							}
						})
		},
		methods:{
			/* selectChange(e) {
				const that=this;
			      that.selectedValue = that.selectOptions[e.detail.value];
			      console.log('选择的状态是：', that.selectedValue);
			      // 在这里可以根据选择的状态进行其他业务逻辑处理
			      that.selectShow = false;
			}, */
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			open() {//打开日历
				this.$refs.calendar.open()
			},
			close(){//关闭日历
				console.log('弹窗关闭');
			},
			confirm(e) {//日历点击确定按钮返回日期
				console.log('confirm 返回:', e)
			},
			// change(e) {
			//     console.log("e:", e);
			// },
			// 切换状态下拉框的显示隐藏状态
			toggleDropdown() {  
			  this.isDropdownVisible = !this.isDropdownVisible;  
			},  
			// 状态选择下拉项  
			selectItem(item) {  
			  this.selected = item; // 更新选中项  
			  this.isDropdownVisible = false; // 关闭下拉框  
			},  	
			// 切换维修方式下拉框的显示隐藏状态
			toggleDropdown2() {  
			  this.isDropdownVisible2 = !this.isDropdownVisible2;  
			},  
			// 维修方式选择下拉项  
			selectItem2(item) {  
			  this.selected2 = item; // 更新选中项  
			  this.isDropdownVisible2 = false; // 关闭下拉框  
			},  	
			change(tid){
				console.log(tid);
				uni.navigateTo({
					url: '/pages/repairDetails/repairDetails?id='+tid
				});
			}
			
			
		}
	}
</script>

<style lang="scss">
	.top{
		// background-color: pink;
		margin-top: -150px;
		
		input{
			background-color: #fff;
			padding: 10px 10px;
			border-radius: 50px;
			width: 80%;
			margin: 0 auto;
			font-size: 13px;
			color: gray;
		}
		image{
			width: 14px;
			height: 14px;
			float: right;
			margin-top: -30px;
			margin-right: 50px;
		}
		.one{
			color: #fff;
			display: inline-block;
			margin: 10px 30px;
			font-size: 13px;
		}
		.two{
			color: #fff;
			display: inline-block;
			// margin-left: 10px;
			font-size: 13px;
		}
		
	}
	
	.repair{
		background-color: white;
		height: 270rpx;
		width: 95%;
		// position: absolute;
		margin-top: 10px;
		margin-left: 20rpx;
		border-radius: 20rpx;
		// z-index: 1;
		.number{
			padding-top: 30rpx ;
			padding-bottom: 20rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			// background-color: pink;
			border-bottom: 5px solid #F9F9F9;
			view{
				float: right;
				font-size: 12px;
				color: #5D9CF9;
			}
		}
		.info{
			margin: 30rpx 30rpx;
			font-size: 13px;
		}
		.btn{
			width: 30%;
			position: relative;
			top: -60px;
			right: -240px;
			
		}
	}
	.dropdown {
	  display: inline-block;
	  position: relative;  
	  left: 70px;
	  margin-left: 5px;
	  width: 28%; /* 调整宽度 */  
	  border-radius: 50px;
	}  
	  
	.dropdown-trigger {  
	  padding: 5px 20px;  
	  font-size: 12px;
	  background-color: rgba(0,0,0,0.1);  
	  // border: 1px solid #ddd;  
	  border-radius: 40px;
	  cursor: pointer;  
	  display: flex;  
	  justify-content: space-between;  
	  align-items: center;
	  color: #fff;
	}  
	  
	.dropdown-content {  
	  position: absolute;  
	  top: 100%; /* 紧接在触发按钮下方 */  
	  left: 0;  
	  right: 0;  
	  color: gray;
	  height: 160px;
	  font-size: 12px;
	  border-radius: 20px;
	  background-color:  rgba(0,0,0,0.1);  
	  // border: 1px solid #ddd;  
	  box-shadow: 0 2px 4px rgba(0,0,0,0.1);  
	  z-index: 1;  
	}  
	  
	.dropdown-item {  
	  padding: 10px;  
	  border-bottom: 1px solid #eee;  
	  cursor: pointer;  
	}  
	  
	.dropdown-item:last-child {  
	  border-bottom: none;  
	}  
	  
	.arrow {  
	  transition: transform 0.2s;  
	}  
	  
	.arrow-up {  
	  transform: rotate(180deg);  
	}  
	
	.select-button {
	  padding: 10px;
	  border: 1px solid #ccc;
	}
</style>
